<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>天津智能公共自行车</title>
		<link rel="stylesheet" type="text/css" href="css/base/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/base/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/base/public.css" />
		<link rel="stylesheet" type="text/css" href="css/base/amazeui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/base/Buttons.css" />
		<link rel="stylesheet" type="text/css" href="css/base/jqueryweui.css" />
		<link rel="stylesheet" type="text/css" href="css/base/base.css" />
		<!--高德地图API-->
		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=49dc5903ee5ec13e38e5f0c5a406e094"></script>
		<!--<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>-->
		<script src="js/base/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/base/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/base/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/base/amazeui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/base/base.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.index_top {
				height: 50px;
				width: 100%;
				position: fixed;
				top: 0px;
				z-index: 999;
				display: -webkit-box;
				-webkit-box-align: center;
				background-color: rgba(247, 247, 250, 1);
				text-align: center;
				font-family: "微软雅黑";
			}
			
			.index_content {
				margin: 50px 0px;
			}
			
			.index_topLeft {
				display: -webkit-box;
				width: 40px;
				font-size: 30px;
				font-weight: bolder;
				color: white;
				margin-left: 10px;
			}
			
			.index_topCenter {
				border-radius: 5px;
				border: 1px solid rgba(4, 91, 178, 1);
				display: -webkit-box;
				-webkit-box-align: center;
				height: 35px;
				-webkit-box-flex: 1;
				background: rgba(255, 255, 255, 1);
			}
			
			.index_topInput {
				display: -webkit-box;
				-webkit-box-flex: 1;
				height: 20px;
				font-size: 14px;
				color: #666666;
				margin: 0px 10px;
				outline: none;
				border: none;
				background: inherit;
			}
			
			.index_topSearch {
				display: -webkit-box;
				background: rgba(14, 120, 230, 1);
				height: 100%;
				color: white;
				font-size: 22px;
				padding-left: 10px;
				padding-right: 10px;
			}
			
			.index_topRight {
				display: -webkit-box;
				margin: 0px 10px;
				width: 35px;
				font-size: 30px;
				font-weight: bolder;
				color: white;
			}
			
			.close {
				right: 10px;
			}
			
			.index_content_news {
				border-bottom: 5px solid #eee;
				padding: 10px;
			}
			
			.index_content_news_title {
				margin: 10px 0px;
			}
			
			.index_content_news_txt {
				-webkit-box-orient: vertical;
				display: -webkit-box;
				overflow: hidden;
				-webkit-line-clamp: 3;
			}
			
			.index_content_news_txt img {
				width: 100%;
			}
			
			.top_ce {
				margin-top: 10px;
			}
			
			.top_ce_content {
				/*border: 1px solid;*/
				padding: 10px 10px;
			}
			
			.top_ce_content ul>li {
				padding: 10px;
				margin-left: 13px;
			}
			
			li {
				list-style-type: none;
			}
			
			.top_ce_content:active {
				background-color: #555;
			}
			
			.top_ce_contentImg {
				width: 30px;
				height: 30px;
				padding: 5px;
				font-size: 12px;
				text-align: center;
				margin-right: 20px;
				color: rgba(255, 255, 255, 1);
			}
			
			.top_ce_contentJT {
				width: 30px;
				height: 30px;
			}
			
			.top_ce_contentTxt {
				-webkit-box-flex: 1;
				font-size: 16px;
				height: 30px;
			}
			
			.sendTieDiv {
				position: fixed;
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				margin: auto;
				border: 1px solid #999;
				background: rgba(240, 240, 240, 1);
				z-index: 1000;
				width: 100%;
				height: 300px;
				overflow: auto;
				display: none;
			}
			
			.sendTieDiv .button {
				position: absolute;
				bottom: 0px;
				width: 100%;
			}
			
			.sendTieTitle {
				outline: none;
				margin: 15px;
				color: #666;
				font-size: 16px;
				line-height: 35px;
				border-bottom: 2px solid rgba(14, 120, 230, 1);
			}
			
			.sendTieTxt {
				outline: none;
				margin: 15px;
				color: #666;
				font-size: 16px;
			}
			
			.sendFenlei {
				outline: none;
				margin: 15px;
				color: #666;
				font-size: 16px;
			}
			
			.sendTieTitle:empty:before,
			.sendTieTxt:empty:before,
			.sendFenlei:empty:before {
				content: attr(placeholder);
			}
			/*Content内容样式*/
			
			#content div {
				/*border: 1px solid;*/
			}
			
			.container {
				/*height: 55vh;*/
				/*margin-top: 55px;*/
			}
			
			.photo {
				border: 1px solid rgba(230, 229, 234, 1);
				position: relative;
				top: 70vh;
				background-color: red;
				width: 100%;
				height: 200px;
				background-color: rgba(247, 247, 250, 1);
				-webkit-border-top-left-radius: 130px;
				-moz-border-radius-topleft: 130px;
				border-top-left-radius: 130px;
				-webkit-border-top-right-radius: 130px;
				-moz-border-radius-topright: 130px;
				border-top-right-radius: 130px;
			}
			
			.photoImg {
				position: absolute;
				top: 10px;
				left: 0px;
				right: 0px;
				border-radius: 150px;
				width: 150px;
				height: 150px;
				margin: auto;
				background-image: url(img/index/use.png);
				background-size: cover;
			}
			
			.bikeInfo {
				position: relative;
				border: 1px solid #ddd;
				background-color: rgba(247, 247, 250, 0.8);
				width: 200px;
				height: 100px;
				position: absolute;
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				margin: auto;
				display: none;
			}
			
			.bikeInfo input {
				padding: 5px;
				width: 120px;
			}
			
			#time {
				width: 170px;
				text-align: center;
				position: absolute;
				left: 0px;
				right: 0px;
				top: 20px;
				margin: auto;
				height: 70px;
			}
			
			#time span {
				font-size: 32px;
				font-weight: bolder;
			}
			
			#time a {
				font-size: 22px;
			}
		</style>
	</head>

	<body>
		<!--顶部开始-->
		<div class="index_top top_blue">
			<span style="color: #FFF; margin-left: 20px;font-family: '微软雅黑';font-size:18px;font-weight: bolder;">天津智能公共自行车</span>
		</div>
		<!--顶部结束-->

		<div id="content">
			<div id='container' style="height: 95vh;"></div>
			<div id="tip"></div>

			<div class="photo">
				<div class="photoImg"></div>
				<div id="time" style="display: none;">
					<span class="h">00</span> : <span class="m">00</span> : <span class="s">00</span>
					<!--<div>结算</div>-->
					<a href="#" class="button button-glow button-rounded button-raised button-primary endbike">结束行程</a>
				</div>
			</div>
			<div class="bikeInfo">
				<div style="position: absolute;top: 30px;left: 20px;">
					<input type="number" name="" id="bikeNumber" placeholder="请输入车牌号" />
					<button id="sure" style="padding: 5px;">确定</button>
				</div>
			</div>
		</div>
		<!--内容结束-->
		<!--底部按钮开始-->
		<div class="weui-tabbar footer">
			<a href="index.html" class="weui-tabbar__item ">
				<p style="" class="footertab_blue weui-tabbar__label Hui-iconfont Hui-iconfont-saoyisao "></p>
			</a>
			<a href="IM.html " class="weui-tabbar__item ">
				<p class="weui-tabbar__label Hui-iconfont Hui-iconfont-xiaoxi1 "></p>
			</a>
			<a href="personal.html " class="weui-tabbar__item ">
				<p class="weui-tabbar__label Hui-iconfont Hui-iconfont-user "></p>
			</a>
		</div>
		<!--底部按钮结束-->

	</body>
	<script src="js/base/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//接入leanCloud初始化开始
		window.onload = function() {
			var APP_ID = 'hN1kSQf2DQ9awcJmwEmIIdVo-gzGzoHsz';
			var APP_KEY = 'aHCVjhhcyeerTEsKObkGSyd6';
			AV.init({
				appId: APP_ID,
				appKey: APP_KEY
			});
		}
		//接入leanCloud初始化结束
		/***************************************
		接入高德地图API开始
		***************************************/
		var map, geolocation;
		//加载地图，调用浏览器定位服务
		map = new AMap.Map('container', {
			resizeEnable: true
		});
		map.plugin('AMap.Geolocation', function() {
			geolocation = new AMap.Geolocation({
				enableHighAccuracy: true, //是否使用高精度定位，默认:true
				timeout: 10000, //超过10秒后停止定位，默认：无穷大
				buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				buttonPosition: 'RB'
			});
			map.addControl(geolocation);
			console.log(geolocation)
			geolocation.getCurrentPosition();
			AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
			AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
		});
		//解析定位结果
		function onComplete(data) {
			var str = ['定位成功'];
			console.log(data.position.getLng())
			str.push('经度：' + data.position.getLng());
			str.push('纬度：' + data.position.getLat());
			if(data.accuracy) {
				str.push('精度：' + data.accuracy + ' 米');
			} //如为IP精确定位结果则没有精度信息
			str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
			document.getElementById('tip').innerHTML = str.join('<br>');
		}
		//解析定位错误信息
		function onError(data) {
			document.getElementById('tip').innerHTML = '定位失败';
		}
		//接入高德地图结束

		$('.photoImg').click(function() {
			$('.bikeInfo').attr("style", "display: block;")
		})

		$('#sure').click(function() {

			if(sessionStorage.getItem("email")) {
				var bikeNumber = $('#bikeNumber').val()
				var query = new AV.Query('bike_info');
				var cql = 'select * from bike_info where bikeId = "' + bikeNumber + '"';
				AV.Query.doCloudQuery(cql).then(function(data) {
					// results 即为查询结果，它是一个 AV.Object 数组
					var results = data.results;
					console.log(results)
					if(results.length == 0) {
						alert("没有此车号，请重新输入！")
					} else {
//						console.log(results[0].attributes)
						if(results[0].attributes.bikeState == "正在使用") {
							alert("此车正在使用，请重新输入！")
						} else {
							$('.bikeInfo').attr("style", "display: none;")
							//bikeId号存入缓存
							sessionStorage.setItem("bikeId", results[0].id)

							//后台数据库改变车使用状态值
							// 第一个参数是 className，第二个参数是 objectId
							var todo = AV.Object.createWithoutData('bike_info', sessionStorage.getItem("bikeId"));
							// 修改属性
							todo.set('payOr', "未结算");
							todo.set('bikeState', "正在使用");
							// 保存到云端
							todo.save();
							alert("开始用车")
							sessionStorage.setItem("bikeNumber",bikeNumber);
							$('.photoImg').attr("style", "display: none;");
							$("#time").attr("style", "display: block;");
							jifei();
							bikeHistoryCreate ();

						}
					}
				}, function(error) {
					console.log(error)
				});
			} else {
				alert("请先进行登录！")
				$('.bikeInfo').attr("style", "display: none;")

			}
		})

		function jifei() {
			var hour = 0;
			var minute = 0;
			var secound = 0;
			setInterval(function() {
				++secound
				if(secound < 60) {
					$(".s").html(secound < 10 ? "0" + secound : secound);
					$(".m").html(minute < 10 ? "0" + minute : minute)
				} else {
					secound = 0;
					minute++;
					$(".s").html(secound < 10 ? "0" + secound : secound);
					$(".m").html(minute < 10 ? "0" + minute : minute)
					if(minute == 60) {
						secound = 0;
						minute = 0;
						hour++;
						$(".h").html(hour < 10 ? "0" + hour : hour);

					}
				}
			}, 1000)
		}
		
		function bikeHistoryCreate () {
			var bikeNumber =sessionStorage.getItem("bikeNumber");
			var email =sessionStorage.getItem("email");
//			var bikePay =$(".moneyNum").html();
//			var bikeTime =sessionStorage.getItem("时")+":"+sessionStorage.getItem("分")+":"+sessionStorage.getItem("秒");
			
			console.log(bikeNumber)
			console.log(email)
//			console.log(bikePay)
//			console.log(bikeTime)
			
				// 声明类型
				var User_info = AV.Object.extend('bike_history');
				// 新建对象
				var User_info = new User_info();
				// 设置邮箱
				User_info.set('email', email);
				// 设置车辆号
				User_info.set('bikeNumber', bikeNumber);
				// 设置消费数据
//				User_info.set('pay', bikePay);
//				// 设置消费时间
//				User_info.set('bikeTime', bikeTime);
				// 设置姓名
				User_info.save().then(function(todo) {
					console.log(todo.id)
					sessionStorage.setItem("historyId",todo.id)
					console.log('历史记录成功');
				}, function(error) {
					alert('历史记录失败');
				});
		}

		$('.endbike').click(function() {

			sessionStorage.setItem("时", $(".h").html())
			sessionStorage.setItem("分", $(".m").html())
			sessionStorage.setItem("秒", $(".s").html())
			location.href = "payChoice.html";
		})
	</script>

</html>